<template>
  <view class="time-slot-manager">
    <view class="header">
      <view class="cutomer-data">
        <view class="date">{{ currentDate }}</view>
        <view>合计:客流量 <text>{{totalCustomNum}}</text> 试穿人数 <text>{{ totalTryWear }}</text></view>
      </view>
    </view>

    <scroll-view scroll-y class="time-slots">
        <view class="time-slot" v-for="(slot, index) in shopDataDetails" :key="index">
          <view class="time-range">时段：<text class="time">{{ slot.startTime }}-{{ slot.endTime }}</text></view>
          <view class="metrics">
            <view class="metric-item">
              <text class="label">客流量</text>
              <up-input type="number" v-model="slot.customNum" inputAlign="right" :border="'none'" class="input" placeholder="请输入客流量" />
            </view>
            <view class="metric-item">
              <text class="label">试穿人数</text>
              <up-input type="number" inputAlign="right" :border="'none'" v-model="slot.tryWear" class="input" placeholder="请输入试穿人数" />
            </view>
          </view>
        </view>
    </scroll-view>

    <view class="footer">
      <button class="save-btn" @click="handleSave" :disabled="loading">
        <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon><text>保存</text></button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { shopApi,studyApi } from "@/api";
const loading = ref(false);
const getCurrentTime= ()=>{
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`
}
const currentDate = ref('')
const shopCountDataId = ref('')

const totalCustomNum = computed(() => {
  return shopDataDetails.value.reduce((total, item) => total + Number(item.customNum), 0);
});

const totalTryWear = computed(() => {
  return shopDataDetails.value.reduce((total, item) => total + Number(item.tryWear), 0);
});

const shopDataDetails = ref([
  {
    startTime:'8:00',
    endTime:'10:00',
    customNum: '',
    tryWear: ''
  },
  {
    startTime:'10:00',
    endTime:'12:00',
    customNum: '',
    tryWear: ''
  },
  {
    startTime:'12:00',
    endTime:'14:00',
    customNum: '',
    tryWear: ''
  },
  {
    startTime:'14:00',
    endTime:'16:00',
    customNum: '',
    tryWear: ''
  },
  {
    startTime:'16:00',
    endTime:'18:00',
    customNum: '',
    tryWear: ''
  },
  {
    startTime:'18:00',
    endTime:'20:00',
    customNum: '',
    tryWear: ''
  },
  {
    startTime:'20:00',
    endTime:'22:00',
    customNum: '',
    tryWear: ''
  }
]);

let HistoryshopData = ref([]);

const goToDetails = (item, type) => {
  uni.navigateTo({
    url: `/pagesshop/businessdata/details?id=${item}&type=${type}`
  });
};

const handleSave = () => {
  let params = {
    shopCountDataId: shopCountDataId.value,
    createTime: currentDate.value,
    totalCustomNum: totalCustomNum.value,
    totalTryWear: totalTryWear.value,
    shopDataDetails: shopDataDetails.value,
  };
  loading.value = true;
  shopApi.SHOPSAVEORUPDATESHOPDATA(params).then((res) => {
    loading.value = false;
    if (res.code == 200) {
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
};

const getCurrentData = (createTime) => {
  shopApi.SHOPGETSHOPDATABYTIME({ createTime: createTime }).then((res) => {
    if (res.code == 200) {
      HistoryshopData.value = res.result.shopDataDetails;
      // Update shopDataDetails based on the response
      HistoryshopData.value.forEach(historyItem => {
        shopDataDetails.value.forEach(slot => {
          if (slot.startTime === historyItem.startTime && slot.endTime === historyItem.endTime) {
            slot.customNum = historyItem.customNum;
            slot.tryWear = historyItem.tryWear;
          }
        });
      });
    } else {
      uni.showToast({ title: res.errMsg, icon: "none" });
    }
  });
};

onLoad(async (options) => {
  currentDate.value=options.time
  shopCountDataId.value = options.shopCountDataId
  getCurrentData(options.time)
})
</script>

<style lang="scss" scoped>
.time-slot-manager {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  background-color: #f5f5f5;
  .header {
    width: 100%;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;

    .cutomer-data {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #f5f5f5;
      padding: 24rpx 24rpx 24rpx 24rpx;
      box-sizing: border-box;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.6);

      .date {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }


  .time-slots {
    flex: 1;
    padding: 0 0 124rpx 0;
    box-sizing: border-box;
    margin-bottom: 100rpx;

    .time-slot {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx ;

      .time-range {
        font-size: 32rpx;
        color: rgba(0, 0, 0, 0.6);
        margin-bottom: 24rpx;

        .time {
          color: rgba(214, 142, 68, 1);
        }
      }

      .time-range1 {
        //styleName: Title/Small;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: rgba(0, 0, 0, 0.6);
      }

      .metrics {
        display: flex;
        flex-direction: column;
        gap: 20rpx;

        .metric-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 72rpx;

          .label {
            font-size: 28rpx;
            color: #666;
          }

          .value {
            font-size: 28rpx;
            color: #333;
          }
        }
      }

      .metrics1 {
        display: flex;
        justify-content: space-between;

        .metric-item {
          flex: 1;
          display: flex;
          align-items: center;
          height: 72rpx;

          .label {
            font-size: 28rpx;
            color: #666;
          }

          .value {
            font-size: 28rpx;
            color: #333;
            margin-left: 8rpx;
          }
        }
      }
    }
  }

  .footer {
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
    z-index: 99;
    .save-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #c4996c;
      color: #fff;
      border: none;
      border-radius: 40rpx;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      &:active {
        opacity: 0.9;
      }
    }
  }
}
</style>